<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断试题</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
    <style>
        .card {
            min-height: 400px;
        }
    </style>
</head>

<body>
    <!-- 判断题 -->
    <div class="container mt-2">
        <div class="col-md-9 col-lg-6 col-xl-5">
            <div class="d-flex justify-content-center">
                <h3 class="h5">国四培训 - 判断题顺序练习</h3>
            </div>
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <div>题目代码： <span id="exerciseProblemsID"></span></div>
                    <div><i class="bi bi-check2-square me-2"></i></div>
                </div>
                <div class="card-body border-bottom">
                    <p class="card-text" id="exerciseProblems"></p>
                </div>
                <div class="card-body">
                    <p class="card-text">可选答案</p>
                    <div class="d-flex flex-column" id="answerContent">

                    </div>
                </div>
                <div class="card-footer d-flex">
                    <button class="btn btn-primary btn-sm" id="btnCommit">提交答案</button>
                    <div class="ms-3 d-flex align-items-center" id="rightAnswer"></div>

                </div>
            </div>
            <nav class="mt-3">
                <ul class="pagination d-flex justify-content-between align-items-center">
                    <li class="page-item" ><a class="page-link" onclick="previous()" href="javascript:;">上一题</a></li>
                    <span id="pageNum"></span>
                    <li class="page-item" ><a class="page-link" href="javascript:;" onclick="next()">下一题</a>
                    </li>
                </ul>
            </nav>
            <!-- 最终答案信息区 -->
            <div class="d-none" id="answerMsg" role="alert">
                <i></i>
                <span class="ms-2"></span>
            </div>
        </div>
    </div>

    <!-- js脚本 -->
    <script src="../Bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/holder.js"></script>
    <script>
        let pageNum = 0;                //记录当前页号
        let exerciseProblemsData;       //存储ajax获取的题目数据

        let sAnswer;                    //单选标准答案数据
        let sSelect;                    //单选提交的数据

        // 获取试题函数
        function getExerciseProblems() {
            $.ajax({
                type: 'get',
                url: 'http://wp.jsfw.net/cyjpx/ajax/exerciseProblemsDisplay.php',
                data: {
                    tType: '服务站培训',
                    eGroup: '国四培训',
                    eType: '判断题'
                },
                dataType: 'jsonp',
                jsonp: "jsoncallback",
                success: function (data) {
                    if (data.length == 0) {
                        alert("未获取到试题");
                        return;
                    }
                    exerciseProblemsData = data;
                    pageNum = localStorage.getItem('pageNumJ');
                    if (pageNum != null && pageNum > 1 && pageNum < exerciseProblemsData.length) {
                        if (confirm('是否定位到上次学习位置第 ' + pageNum + ' 题？')) {
                            pageNum = pageNum - 1;
                            setExerciseProblems();
                        } else {
                            pageNum = 0
                            setExerciseProblems();
                            localStorage.setItem('pageNumJ', 1);
                        };
                    } else {
                        pageNum = 0
                        setExerciseProblems();
                        localStorage.setItem('pageNumJ', 1);
                    }
                },
                error: function () {
                    alert('Ajax获取数据失败!');
                }
            });
        }
        //  设置问题
        function setExerciseProblems() {
            $("#exerciseProblemsID").text(exerciseProblemsData[pageNum].ExerciseProblemsID);
            $("#exerciseProblems").text(exerciseProblemsData[pageNum].ExerciseProblems);
            $("#pageNum").text(pageNum + 1 + " / " + exerciseProblemsData.length);
            getAnswer(exerciseProblemsData[pageNum].ExerciseProblemsID);
        }
        // 获得试题答案函数
        function getAnswer(ExerciseProblemsID) {
            $.ajax({
                // async: false,
                type: 'get',
                url: 'http://wp.jsfw.net/cyjpx/ajax/answerDisplay.php',
                data: {
                    exerciseProblemsID: ExerciseProblemsID
                },
                dataType: 'jsonp',
                jsonp: "jsoncallback",
                success: function (data) {
                    $("#answerContent").empty();
                    sSelect = null;
                    sAnswer = data[0].IsRight;
                    $("#answerContent").append("<div class='form-check'>\
                                <input onclick='selectTrueOrFalse(this)' class='form-check-input' type='radio' name='rName' id='r1' value=1>\
                                <label class='form-check-label' for='r1'><span class='text-secondary'>A：</span>正确</label></div>");
                    $("#answerContent").append("<div class='form-check'>\
                        <input onclick='selectTrueOrFalse(this)' class='form-check-input' type='radio' name='rName' id='r0' value=0>\
                        <label class='form-check-label' for='r0'><span class='text-secondary'>B：</span>错误</label></div>");

                },
                error: function () {
                    alert('Ajax获取答案失败!');
                }
            })
        }
        // 运行获取试题
        getExerciseProblems();
        // 向后翻页
        function next() {
            $("#answerMsg").removeClass().addClass("d-none");
            pageNum++;
            if (pageNum < exerciseProblemsData.length) {
                setExerciseProblems();
                $("#previous").toggleClass("disabled", false);
                $("#rightAnswer").text("");
            } else {
                pageNum--;
                $("#next").addClass("disabled");
                alert("已经是最后一题");
            }
            localStorage.setItem('pageNumJ', pageNum + 1);           //设置最后页数
        }
        // 向前翻页
        function previous() {
            $("#answerMsg").removeClass().addClass("d-none");
            pageNum--;
            if (pageNum >= 0) {
                setExerciseProblems();
                $("#next").toggleClass("disabled", false);
                $("#rightAnswer").text("");
            } else {
                pageNum++;
                $("#previous").addClass("disabled");
                alert("已经是第一题");
            }
            localStorage.setItem('pageNumJ', pageNum + 1);           //设置最后页数
        }
        // 点选判断题答案
        function selectTrueOrFalse(e) {
            sSelect = e.value;
            if (e.value == 1) {
                $("#rightAnswer").text("你选择了答案：A");
            } else {
                $("#rightAnswer").text("你选择了答案：B");
            }
        }
        // 点击提交按钮
        $("#btnCommit").click(function () {
            if (sAnswer == sSelect) {
                rightMsg();
            } else {
                errorMsg();
            }
        })
        // 正确提示
        function rightMsg() {
            $("#answerMsg").removeClass().addClass("alert alert-success d-clock");
            $("#answerMsg i").removeClass().addClass("bi bi-check-lg");
            $("#answerMsg span").text("答案正确");
        }
        // 错误提示
        function errorMsg() {
            $("#answerMsg").removeClass().addClass("alert alert-warning d-clock");
            $("#answerMsg i").removeClass().addClass("bi bi-x-lg");
            $("#answerMsg span").text("答案错误");
        }
    </script>
</body>

</html>